<template>
	<view class="content">
		<!-- 返回按钮 -->

		<view class="banner-btn" @click="gotoHome">
			<image src="../../static/commodity/common2.png" mode=""></image>
		</view>


		<!-- 轮播图的区域 -->
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"  >
				<swiper-item v-for="(item,index) in spimgs" :key="index" >
				
					<image :src="item"></image>
					
				</swiper-item>
				
			</swiper>
		</view>

		<!-- 规格型号 -->
		<view class="area">
			<view class="area-money">￥{{spdata.showPrice}}</view> 
			<view class="area-title">{{spdata.commodityName}}</view>
			<view class="area-mo">
				<view class="area-mo1">模型：实物</view>
				<view class="area-mo2">月销量8500</view>
			</view>
		</view>
		<view class="specification" @click="showShopDialog">
			<view class="specification-left">已选</view>
			<view class="specification-centent">
			</view>
			<view class="specification-right">...</view>
		</view>
		<view class="specification2">
			<view class="specification-left">发货</view>
			<view class="specification-centent">广州| 邮费。包邮</view>
			<view class="specification-right">...</view>
		</view>
		<my-goods @close="closeShopDialog" class="hidden" :class="{show:shopFlag}" @value="value"></my-goods>
		<!-- 评论 -->
		<view class="comment">
			<view class="comment-title">
				<view class="comment-title1" @click="morespl">评论（28439）</view>
				<view class="comment-title2" @click="goWrite">写评论</view>
			</view>
			<view class="comment-content" v-for="(item,index) in WaresIdComment">
				<view class="comment-content-name">
					<view class="comment-content-name1">
						<image src="../../static/home/ss-imgs5.png" mode=""></image>
					</view>
					<view class="comment-content-name12">{{item.nickName}}</view>
					<view class="comment-content-name2">
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common4.png" mode=""></image>
						<image src="../../static/commodity/common5.png" mode=""></image>
					</view>
					<view class="comment-content-name3">...</view>
				</view>
				<view class="comment-content-content">
					{{item.content}}
				</view>
				<view class="comment-content-foot">
					<view class="comment-content-foot1">{{item.time}}</view>
					<!--  v-if="item.clickType == 0" -->
					<view class="comment-content-foot2" @click="dianZanshangpin" v-if="item.clickType == 0">
						<image src="../../static/commodity/common6.png" mode=""></image>{{item.clickNum}}
					</view>
					<!-- v-if="item.clickType == 1" -->
						<view class="comment-content-foot2" @click="dianZanshangpin" v-if="item.clickType == 1">
						<image src="../../static/commodity/common7.png" mode=""></image>{{item.clickNum}}
					</view>
				</view>
			</view>
			<!-- <view class="comment-content">
				<view class="comment-content-name">
					<view class="comment-content-name1">
						<image src="../../static/home/ss-imgs5.png" mode=""></image>
					</view>
					<view class="comment-content-name12">赵春来</view>
					<view class="comment-content-name2">
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common4.png" mode=""></image>
						<image src="../../static/commodity/common5.png" mode=""></image>
					</view>
					<view class="comment-content-name3">...</view>
				</view>
				<view class="comment-content-content">
					这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论
				</view>
				<view class="comment-content-foot">
					<view class="comment-content-foot1">2020-12-12 18:23</view>
<<<<<<< Updated upstream
<<<<<<< Updated upstream
					<view class="comment-content-foot2">
						<image src="../../static/commodity/common7.png" mode=""></image>6486
					</view>

=======
=======
>>>>>>> Stashed changes
					<view class="comment-content-foot2" @click="dianZanpinglun"><image src="../../static/commodity/common7.png" mode=""></image>6486</view>
					
>>>>>>> Stashed changes
				</view>
			</view>
			<view class="comment-content">
				<view class="comment-content-name">
					<view class="comment-content-name1">
						<image src="../../static/home/ss-imgs5.png" mode=""></image>
					</view>
					<view class="comment-content-name12">赵春来</view>
					<view class="comment-content-name2">
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common4.png" mode=""></image>
						<image src="../../static/commodity/common5.png" mode=""></image>
					</view>
					<view class="comment-content-name3">...</view>
				</view>
				<view class="comment-content-content">
					这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论
				</view>
				<view class="comment-content-foot">
					<view class="comment-content-foot1">2020-12-12 18:23</view>
<<<<<<< Updated upstream
<<<<<<< Updated upstream
					<view class="comment-content-foot2">
						<image src="../../static/commodity/common6.png" mode=""></image>6486
					</view>

=======
=======
>>>>>>> Stashed changes
					<view class="comment-content-foot2" @click="dianZanpinglun"><image src="../../static/commodity/common6.png" mode=""></image>6486</view>
					
>>>>>>> Stashed changes
				</view>
			</view> -->
			
				<view class="comment-bottom"  @click="loading">
					加载更多
				</view>
			

		</view>
		<!-- 商品介绍 -->
		<view class="particulars">
			<view class="particulars-title">商品介绍</view>
			<view class="particulars-content">
				<view class="particulars-content-title">
					这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍
				</view>
				<view class="particulars-content-imgs">
					<image src="../../static/commodity/common8.png" mode=""></image>
				</view>
				<view class="particulars-content-imgs">
					<image src="../../static/commodity/common8.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-btn">
			
				<view class="bottom-btn-dp" @click="dianPu()">
					<image src="../../static/commodity/common9.png" mode=""></image>店铺
				</view>
				<view class="bottom-btn-gwc" @click="gouWuche()">
					<uni-badge text="1" size="small" absolute="rightTop" type="error" class="huibiao"></uni-badge>
					<image src="../../static/commodity/common10.png" mode=""></image>
					<text>购物车</text>
				</view>
				<view class="bottom-btn-sc" @click="shouCang2()">
					<image src="../../static/commodity/common15.png" mode="" v-show="shoucangtu2"></image>
					<image src="../../static/commodity/common11.png" mode="" v-show="!shoucangtu2"></image>收藏
				</view>
				<view class="bottom-btn-jiaru" @click="showShopDialog">
					加入购物车
				</view>
				<view class="bottom-btn-liji" @click="liji">
					立即购买
				</view>
		</view>
	</view>
</template>

<script>
	import mygoods from '../../components/my-goods/my-goods.vue'
	export default {
		data() {
			return {
				spimgs:'',
				spdata:'',//接收商品数据
				// commodityImgs,// 商品详情拿到的照片
				commodityId:'',// 商品id
				shoucangtu2:false,//收藏点击切换
				serviceFlag: false,
				evaluateId:'',//评价ID
				evaluateInfo:'',// 评论信息
				serviceFlag:false,
				evaluateType:'好评',// 评价类型（好评、差评
				shopFlag:false,
				info: [{
						id: '1',
						// image: '../../static/commodity/common1.png',
						imgs: '../../static/commodity/common1.png'
					},
					{
						id: '2',
						imgs: '../../static/commodity/common1.png'
					},
					{
						id: '3',
						// image: '../../static/commodity/common1.png',
						imgs: '../../static/commodity/common1.png'
					}

				],
				waresId: '',
				WaresIdDetail:[],//商品详情  
				WaresIdComment:[],//商品评论
				deslist: '', //数据
				counter: 0, //每点一次加载更多+1
				pageStart: 0,
				pageSize: 5 //第一次显示5条，每加载一次原来基础上多五条
			}

		},
		onLoad(options) {
			this.waresId=options.waresId
			this.commodityId = options.commodityId
			console.log(this.commodityId ,'哒哒哒哒哒')
			this.jsDetail()
			this.dianZanshangpin()
			this.numberLikes()// 查询点赞数量
			// 商品接口***********
			this.shangPinliebiao()// 商品的评论列表
			this.xiangQing()
			this.leiMu()
			this.specificationLlist()
		},
		
		methods: {
			gotoHome() {
				uni.switchTab({
					url: '../home/home'
				})
			},
			goWrite() {
				uni.navigateTo({
					url: './write-comment?commodityId='+this.commodityId
				})
			},
			// 跳转评论列表页面
			morespl(){
				uni.navigateTo({
					url:'./comment2?waresId='+this.waresId
				})
			},
			// 点击立即购买
			liji(){
				uni.navigateTo({
					url:'./indet?waresId='+this.waresId
				})
			},
			// 商品规格列表
			specificationLlist() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/CommodityOptions',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						commodityId: that.commodityId
					},
					afterAjax: (res) => {
						console.log(res,'新增规格列表*接口')
						if (res.code !== 200) {
							console.log(res.data,'新增*规格列表接口错误')
						}
						if (res.code == 200) {
							console.log('新增规格列表通了')
							uni.showToast({
								title: '点击*规格列表',
								icon: 'none'
							})
						}
					}
				})
			},
			// 商品类目
			leiMu() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/getCategoryList',
					header: {
						'token': uni.getStorageSync('token')
					},
					// data: {
					// 	commodityId: this.waresId,
					// },
					afterAjax: (res) => {
						console.log(res,'类目接口')
						if (res.code !== 200) {
							console.log(res.data,'类目接口错误')
						}
						if (res.code == 200) {
							console.log('类目通了')
							uni.showToast({
								title: '点击*类目',
								icon: 'none'
							})
						}
					}
				})
			},
			// 商品详情数据接口
			xiangQing() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/commodityDetail',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						commodityId: that.commodityId,
					},
					afterAjax: (res) => {
						console.log(res,'新增商品详情数据接口接口')
						if (res.code !== 200) {
							console.log(res.data,'新增***商品详情数据接口***接口错误')
						}
						if (res.code == 200) {
							console.log(res.data.commodityImgs[0],'--------------------------------')
							console.log(res.data.commodityImgs,'噢噢噢噢噢噢噢噢')
							that.spimgs = res.data.commodityImgs
							that.spdata = res.data
							// that.commodityImgs = res.data[0].commodityImgs
							uni.showToast({
								title: '点击***商品详情数据接口***',
								icon: 'none'
							})
						}
					}
				})
			},
			// ***商品的评论列表***Specification list
			shangPinliebiao() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/commodityEvaluate',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						commodityId: this.waresId,
						pageNum:'5',
						pageSize:'5'
					},
					afterAjax: (res) => {
						console.log(res,'新增***商品的评论列表***接口')
						if (res.code !== 200) {
							console.log(res.data,'新增***商品的评论列表***接口错误')
						}
						if (res.code == 200) {
							console.log('新增***商品的评论列表***通了')
							uni.showToast({
								title: '点击***商品的评论列表***',
								icon: 'none'
							})
						}
					}
				})
			},
	
			//寄售的接口后期删除***********************************************************
			// 查询点赞数量
			numberLikes() {
				var that = this
				that.$http.req.ajax({
				     path: ':8069/web/mall/evaluateLikeCount',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				    evaluateId:'555',// 评论ID
				     },
				     afterAjax: (res) => {
						 		console.log(res,'查询点赞数量接口')
						 		if (res.code !== 200) {
						 			uni.showToast({
						 				// title: res.msg,
										title: '查询点赞数量，稍后重试',
						 				icon: 'none'
						 			})
						 			console.log(res.msg,'查询点赞数量拿到')
						 		}
						 		if (res.code == 200) {
						 			console.log('查询点赞数量通了')
									// uni.showToast({
									// 	title: '已点赞',
									// 	icon: 'none'
									// })
						 		}
								 
				     }
				    })
			},

			// 商品点赞详情
			dianZanshangpin() {
				var that = this
				that.$http.req.ajax({
				     path: ':8069/web/mall/evaluateLikeAdd',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				     evaluateId: this.evaluateId,// 评价ID
				     },
				     afterAjax: (res) => {
						 		console.log(res,'商品点赞详情接口')
						 		if (res.code !== 200) {
						 			uni.showToast({
						 				title: res.msg,
						 				icon: 'none'
						 			})
						 			console.log(res.msg,'商品点赞详情拿到')
						 		}
						 		if (res.code == 200) {
						 			console.log('商品点赞详情通了')
									uni.showToast({
										title: '已点赞',
										icon: 'none'
									})
						 		}
								 
				     }
				    })
			},
			//点击收藏
			shouCang2() {
				this.shoucangtu2 = !this.shoucangtu2
				var that = this
					that.$http.req.ajax({
					     path: ':8069/web/mall/collectionAdd',
						 header: {
						       'token': uni.getStorageSync('token')
						      },
					     data: {
					    commodityId:'111',// 商品ID
					     },
					     afterAjax: (res) => {
							 		console.log(res,'新增商品收藏接口')
							 		if (res.code !== 200) {
							 			console.log(res.data,'新增商品收藏接口错误')
							 		}
							 		if (res.code == 200) {
							 			console.log('新增商品收藏通了')
										uni.showToast({
											title: '点击商品收藏',
											icon: 'none'
										})
							 		}
					     }
					    })
				},
			
		
			// 寄售商品详情
			jsDetail() {
				var that = this
				that.$http.req.ajax({
					path: ':8090/web/idleWares/idleWaresDetail',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						waresId: this.waresId,
					},
					afterAjax: (res) => {
						console.log(res, '详情')
						this.WaresIdDetail = res.data
					}
				})
			},
			//获取选中完的商品属性
			value(data) {
				console.log(data);
				this.selectAttr = data.text;
				// this.curprice=data.price
			},
			//显示购买弹窗
			showShopDialog() {
				this.shopFlag = true
			},
			closeShopDialog() {
				this.shopFlag = false
			},
		
			//商品评论点赞（已点删、未点加）
			dianZanpinglun() {
				this.shoucangtu = !this.shoucangtu
				var that = this
				that.$http.req.ajax({
				     path: ':8069/web/mall/evaluateLikeAdd',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				    evaluateId:'111',// 评价ID
				     },
				     afterAjax: (res) => {
						 		console.log(res,'商品评论点赞接口')
						 		if (res.code !== 200) {
						 			console.log(res.data,'商品评论点赞接口错误')
						 		}
						 		if (res.code == 200) {
						 			console.log('商品评论点赞通了')
									uni.showToast({
										title: '初始化点赞评论接口',
										icon: 'none'
									})
						 		}
				     }
				    })
			},
		}
	}
</script>

<style lang="scss">
	.content {
		margin: 0 !important;
		padding: 0 !important;
		background-color: #f5f5f5;
		height: 100%;

		.hidden {
			display: none;
		}

		.show {
			display: block;
		}

		.banner-btn {
			position: absolute;
			z-index: 999;
			margin: 25rpx;
			width: 54rpx;
			height: 54rpx;
			margin: 25rpx;
			padding-top: 30rpx;
			padding-left: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		swiper {
			height: 750rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.area {
			background-color: #FFFFFF;
			margin: 14rpx;
			border-radius: 14rpx;
			display: flex;
			flex-direction: column;
			justify-content: left;
			.area-money {
				font-size: 25rpx;
				font-weight: 600;
				margin: 25rpx;
				color: #eb3e3e;
			}
			.area-title {
				font-size: 28rpx;
				margin: 14rpx 25rpx;
				font-weight: 700;
			}
			.area-mo {
				font-size: 21rpx;
				color: #7f7b6f;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 14rpx 25rpx;
			}

			.specification,
			.specification2 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 25rpx;
				border-radius: 14rpx;
				.specification-left {
					font-size: 25rpx;
					font-weight: 600;
					color: #21201d;
					background-color: #FF6034;
				}

				.specification-centent,
				.specification-right {
					background-color: #FF6034;
					font-size: 21rpx;
					color: #9d987e;
				}
			}
		}
		.comment {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 25rpx;

			.comment-title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.comment-title1 {
					font-size: 28rpx;
					font-weight: 600;
				}

				.comment-title2 {
					font-size: 28rpx;
					color: #2b9cef;
					font-weight: 600;
				}
			}

			.comment-content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 28rpx 25rpx;
				.comment-content-name {
					display: flex;
					flex-direction: row;
					justify-content: left;
					.comment-content-name1 {
						width: 57rpx;
						height: 57rpx;
						margin-right: 25rpx;

						image {
							max-width: 100%;
							max-height: 100%;
						}
					}
					.comment-content-name12 {
						font-size: 28rpx;
						color: #21201d;
						font-weight: 600;
					}

					.comment-content-name2 {
						display: flex;
						flex-direction: row;
						justify-content: left;
						width: 128rpx;
						height: 30rpx;
						margin-right: 200rpx;

						image {
							max-width: 100%;
							max-height: 100%;

						}
					}

					
					.comment-content-name3 {
						margin: 0 25rpx;
					}
				}

				.comment-content-content {
					font-size: 25rpx;
					margin: 30rpx;
				}

				.comment-content-foot {
					margin: 43rpx;
					font-size: 21rpx;
					color: #88836d;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.comment-content-foot1 {
						font-size: 21rpx;
						color: #9c977d;
					}

					.comment-content-foot2 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						width: 110rpx;
						height: 28rpx;
						margin: 0 25rpx;
						image {
							max-width: 30%;
							max-height: 100%;
							margin-right: 25rpx;

						}
					}
				}
			}
		}
	.comment-bottom {
				font-size: 25rpx;
				color: #2b9cef;
				text-align: center;
				font-weight: 600;
			}
		// 商品详情
		.particulars {
			display: flex;
			flex-direction: column;
			justify-content: left;
			margin: 25rpx;
			background-color: #FFFFFF;

			.particulars-title {
				font-size: 28rpx;
				font-weight: 700;
				margin: 21rpx 25rpx;
			}

			.particulars-content {
				margin: 21rpx 0;
				font-size: 25rpx;

				.particulars-content-title {
					margin: 12rpx 0;
				}

				.particulars-content-imgs {
					width: 655rpx;
					height: 347rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		// 底部按钮
		.bottom-btn {
			position: fixed;
			bottom: 0;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 105rpx;
			padding: 25rpx;

			.bottom-btn-dp,
			.bottom-btn-gwc,
			.bottom-btn-sc {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 94rpx;
				height: 105rpx;
				font-size: 21rpx;
				margin-bottom: 7rpx;

				.huibiao {
					position: absolute;
					// top: 0;
					z-index: 999;
				}

				image {
					max-width: 60%;
					max-height: 60%;


				}
			}

			.bottom-btn-jiaru {
				width: 202rpx;
				height: 72rpx;
				background-color: #21202d;
				color: #fcda22;
				text-align: center;
				line-height: 72rpx;
				align-items: center;
				border-radius: 39rpx;
				margin: 0 7rpx;
				font-size: 25rpx;
				font-weight: 600;
				margin-top: 16rpx;
			}

			.bottom-btn-liji {
				width: 202rpx;
				height: 72rpx;
				color: #21202d;
				background-color: #fcda22;
				text-align: center;
				line-height: 72rpx;
				align-items: center;
				border-radius: 39rpx;
				margin: 0 7rpx;
				font-size: 25rpx;
				font-weight: 600;
				margin-top: 16rpx;
			}

		}
	}
</style>
